<template>
	<div class="sus">
    <div class="all">
      <div @click="refresh()">
      			<i class="el-icon-refresh-left"></i>
      		</div>
      <!-- 		<div>
      			<i class="el-icon-share"></i>
      		</div>
      		<div>
      			<i class="el-icon-share"></i>
      		</div> -->
      		<div @click="share()">
      			<i class="el-icon-share"></i>
      		</div>
      		<div class="zixun">
      			<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2175899561&site=qq&menu=yes">
      				在线客服
      			</a>
      		</div>
    </div>

	</div>
</template>

<script>
	export default {
		name: 'suspension',
		methods: {
			refresh() {
				window.location.reload();
			},
			share() {
				const input = document.createElement('input');
				document.body.appendChild(input);
				input.setAttribute('value', '听说你想复制我');
				input.select();
				if (document.execCommand('copy')) {
					document.execCommand('copy');
					alert("复制成功，可进行分享");
				}
			}
		}
	}
</script>

<style>
	.sus {
		position: fixed;
		width: 50px;
    height: 230px;
		right: 1.5%;
		top: calc((100vh - 310px) / 2);
		z-index: 11111;
		box-shadow: -1px 0px 4px 0px rgba(226, 228, 230, 0.5);
	}

	a {
		text-decoration: none;
		color: inherit;
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;
		-webkit-appearance: none;
		-webkit-text-size-adjust: none;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		-webkit-touch-callout: none;
		border-bottom: none;
		display: block;
		color: aliceblue;
		width: 100%;
	}

	.sus div {
		height: 50px;
		text-align: center;
		font-size: 31px;
		color: #338ee4;
	}

	.sus div:hover {
		cursor: pointer;
	}

	.sus div:active {
		color: #2870b3;
	}
  .all{
    padding: 10px 0;
  }
	.zixun {
		color: #ffffff !important;
		font-size: 16px !important;
		background-color: #1ac6b6;
		width: 30px;
		margin-left: 10px;
		border-radius: 5px;
		height: 90px !important;
		padding: 10px 0;
	}
</style>
